<template>
  <div>
    <vo-table ref="yuTable" :data="data.tableData.data" :cols="data.tableData.cols" @getSelectionRows="getSelectionRows">

      <template #tableForm>
          <tiny-form :model="data.formData" :rules="data.rules"  :inline="true"  style="height: 40px;" label-width="100px"  ref="formRef">
            <tiny-form-item label="字典查询" >
            <tiny-input v-model="data.info" placeholder="请输入表名"></tiny-input>
            </tiny-form-item>
            <tiny-form-item >
            <tiny-button  size="small"  type="info" @click="querySysTable"  ><vo-icon iconName="search"/>搜索</tiny-button>
            </tiny-form-item>
        </tiny-form>
      </template>

      <template #leftBar>
        <tiny-button-group  size="small">
          <tiny-button  type="success" ghost   @click="addDict"><vo-icon iconName="plus1"></vo-icon>新增</tiny-button>
          <tiny-button  type="danger" ghost @click="delBatch"><vo-icon iconName="delete"></vo-icon>删除</tiny-button>
        </tiny-button-group>
      </template>
      <template v-slot:handleSlot="{row}">
        <tiny-button-group>
          <tiny-button size="mini" ghost type="success" @click="editRow(row)">编辑 </tiny-button>
          <tiny-button size="mini" ghost type="primary" @click="showDetail(row)">查看 </tiny-button>
        </tiny-button-group>
      </template>
    </vo-table>
    <vo-dialog :data="data.tableDataEdit.dialogConfig" :title="data.TableDataShow.dialogConfig.title" v-model:isShow="data.tableDataEdit.isShow">
      <TableDataEdit :editData="data.editData" v-model:isShow="data.tableDataEdit.isShow"></TableDataEdit>
    </vo-dialog>
    <vo-dialog :data="data.TableDataShow.dialogConfig" v-model:isShow="data.TableDataShow.isShow">
      <TableDataShow :data="data.TableDataShow.data" v-model:isShow="data.tableDataEdit.isShow"></TableDataShow>
    </vo-dialog>
  </div>
</template>

<script setup>
  import {reactive, onBeforeMount, ref, getCurrentInstance} from 'vue';
  import {Modal,TinyButtonGroup } from '@opentiny/vue';
  import TableDataEdit from './TableDataEdit.vue';
  import TableDataShow from './TableDataShow.vue';
  let {proxy} = getCurrentInstance();
  const yuTable = ref(null);
  const data = reactive({
    info: '', //搜索信息
    tableData: {data: [], cols: [], tableArrts: {haspage: true}},
    tableDataEdit: {isShow: false, dialogConfig: {title: '', width: '60%'}},
    TableDataShow: {data: {}, isShow: false, dialogConfig: {title: '', width: '60%', lockScroll: false, showHeader: false}},
    editData: {},
  });
  onBeforeMount(() => {
    querySysTable();
  });
  const showDetail = row => {
    data.TableDataShow.isShow = true;
    data.TableDataShow.dialogConfig.title = '数据查看';
    data.TableDataShow.data = row;
  };
  const editRow = (row, index) => {
    data.tableDataEdit.dialogConfig.title = '修改';
    data.editData = row;
    data.tableDataEdit.isShow = true;
  };
  const delBatch = () => {
    let selectRows = yuTable.value.grid().getSelectRecords();
    if (selectRows.length > 0) {
      Modal.confirm('此操作将永久删除该数据, 是否继续?').then(res => {
        if (res == 'confirm') {
          proxy.$api.data.delSysTable(selectRows).then(res => {
            if (res.code != -1) {
              Modal.message({status: 'success', message: res.msg});
              yuTable.value.grid().removeSelecteds();
            } else {
              Modal.message({
                status: 'error',
                message: res.msg,
              });
            }
          });
        }
      });
    } else {
      Modal.message({
        status: 'warning',
        message: '请选择删除数据',
      });
    }
  };
  // 查询数据
  const querySysTable = () => {
    proxy.$api.data.querySysTable({info: data.info}).then(res => {
      data.tableData.data = res;
    });
  };
  const addDict = () => {
    data.tableDataEdit.dialogConfig.title = '新增';
    data.tableDataEdit.isShow = true;
    data.editData = {};
  };
  data.tableData.cols = [
    {type: 'index'},
    {type: 'selection'},
    {title: '来源表', key: 'tableName', align: 'left', edit: false},
    {title: '表名称', key: 'showName', align: 'left', edit: false},
    {title: '备注', key: 'remark', align: 'left', edit: false},
    {
      title: '操作',
      align: 'center',
      slot: 'handleSlot',
    },
  ];
</script>

<style lang="scss" scoped>
.tiny-button {
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 1px;
}
</style>
